<template>
	<view class="cate_wrap">
		<scroll-view scroll-y class="left noScorll">
			<view v-for="(item, index) in navList" :key="item.id" @click.stop="handleNav(index)"
				:class="{ active: current === index }">{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view class="right noScorll">
			<view @click.stop="clickSearch(item)" v-for="item in labelList" :key="item.id">{{ item.name }}</view>
		</scroll-view>
	</view>
</template>

<script>
	// apis	
	import {
		IndexModel
	} from "@/common/apis/index.js"
	const indexModel = new IndexModel()

	export default {
		data() {
			return {
				navList: [],
				current: 0,
				labelList: []
			}
		},
		onLoad() {
			this.getLabelList()
		},
		methods: {
			// 获取导航
			async getLabelList() {
				const {
					data: {
						data
					}
				} = await indexModel.getLabelList()
				this.navList = data;
				this.handleNav(0)
			},
			// 切换分类
			handleNav(index) {
				this.current = index
				let labelLists = this.navList.map(item => item.labelList)
				this.labelList = labelLists[index]
			},
			// 点击标签搜索
			clickSearch(item){
				console.log(item)
			}
		},

	}
</script>

<style lang="scss" scoped>
	.cate_wrap {
		display: flex;
		height: 100%;

		.left {
			width: 200rpx;
			// height: 100%;
			border-radius: 0 24px 24px 0;
			background-color: #f8f9fb;

			view {
				position: relative;
				text-align: center;
				font-size: 30rpx;
				color: #888;
				width: 200rpx;
				line-height: 40rpx;
				padding: 54rpx 30rpx;
				&::before {
					position: absolute;
					left: 0;
					content: '';
					width: 0;
					height: 0;
					background-color: #345dc2;
					transition: height .3s linear;
				}

			}

			.active {
				color: #345dc2;
				font-size: 32rpx;
				font-weight: 700;
				&::before{
					width: 4rpx;
					height: 50rpx;
				}
				
			}
		}

		.right {
			background-color: #fff;
			padding: 30rpx 20rpx;

			view {
				display: inline-block;
				font-size: 24rpx;
				line-height: 60rpx;
				border: 1rpx solid #999;
				border-radius: 30rpx;
				min-width: 160rpx;
				text-align: center;
				padding: 0 4rpx;
				margin: 14rpx 4rpx;
			}


		}

	}
</style>
